@import "../../_config.scss";

.dashboard-designers-cases{
    // background-color: $color-default;
    // padding: 15px;
    .case-list{
        .item {
            margin-bottom: 20px;
            .delete-op {
              display: none;
            }
            &:hover {
              .delete-op {
                display: block;
                position: absolute;
                top: 10px;
                right: 25px;
                border: 1px #efefef solid;
                padding: 5px 10px;
                background: #fff;
                color: #666;
                width: 50px;
              }
            }
            img{
                width: 100%;
                height: 220px;
                &:hover{
                    opacity: 0.8;
                }
            }

            .info{
                background-color:#F6F7FC;
                padding-bottom: 10px;

                h1{
                    font-size: 15px;
                    color: #484848;
                    padding: 15px 0;
                    margin: 0;
                    &:hover{
                        color: $color-private;
                    }
                }

                >div{
                    position: relative;
                    .spend{
                        color: #222222;
                    }
                    .spend-info{
                        color: #999999;
                        font-size: 13px;
                    }
                    &:not(:last-child):after{
                        content: '';
                        width: 1px;
                        height: 50%;
                        background-color: #484848;
                        position: absolute;
                        left: 100%;
                        top: 25%;
                    }
                }
            }

            .new{
                cursor: pointer;
                width: 100%;
                height: 314px;
                background-color: #F6F7FC;
                padding: 20px;

                .inset-border{
                    width: 100%;
                    height: 100%;
                    border: 2px dashed $color-border;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;

                    i{
                        padding: 10px;
                        font-size: 30px;
                        color: #fff;
                        background-color: $color-border;
                        border-radius: 50%;
                    }
                    h1{
                        font-size: 15px;
                        color: #666666;
                    }
                }

                &:hover{
                    i, h1{
                        color: $color-private;
                    }
                    i{
                        background-color: #fff;
                    }
                }
            }
        }
    }
}
